<template>
	<div style='height:100%;' ref='containerRef'>
		<v-chart v-if='value' :autoresize='true' :option='options'></v-chart>
		<XLoading v-else></XLoading>
	</div>
</template>

<script lang='ts'>
	import { use, graphic } from "echarts/core";
	import {
		BarChart
	} from 'echarts/charts'
import { computed, defineComponent, ref, toRef, toRefs } from 'vue';
	use([
		BarChart
	])


	interface Props {
		modelValue : any[] | null
	}

	export default defineComponent({
		props : {
			modelValue : {
				type : [Array, Object],
				default : function() {
					return []
				}
			}
		},


		setup(props:Props) {
			let containerRef = ref<{[key:string]:any}>({})
			var colorList = [
				['rgba(33,42,61,0.6)', '#64c0ea'],
				['rgba(35,44,60,0.6)', '#fccc54'],
				['rgba(32,42,61,0.6)', '#3decbc'],
				['rgba(32,42,62,0.6)', '#1a7efd'],
			]

			const value = toRef(props, 'modelValue')

			let options = computed(() => {
				var W = containerRef.value.clientWidth * 0.4 / 2
				var data = JSON.parse(JSON.stringify(value.value))
				data.sort(function(a, b) {
					return a.value - b.value
				})
				var max = Math.max(...data.map(item => item.value)) //找出最大的
				
				var categoryNameList = []
				var frameData = [] //外框
				var seriesData = []
				data.forEach((item, index) => {
					categoryNameList.push(item.name)

					let rate = item.value / max
					if(rate > 0) {
						if(rate < 0.03) {
							rate = 0.03
						}

						if(rate > 0.99) {
							rate = 0.99
						}
					}
					

					frameData.push({value : 100, v : item.value, itemStyle : {borderColor : colorList[index][1]}})

					var color = colorList[index] || colorList[0]
					seriesData.push(
						{
							value : 100 * rate,
							itemStyle : {
								color : new graphic.LinearGradient(0, 0, 1, 0, [{
												offset: 0,
												color: color[0]
											},
											{
												offset: 1,
												color: color[1]
											}
										], false)
							}
						},
					)

				})


				
				var options =  {
					grid : {
						top : '0px',
						right : '90px',
						bottom : '0px',
						left : '90px'
					},

					xAxis : {
						type : 'value',
						max : 100,
						splitLine : {
							show : false
						},
						axisLine : {
							show : false
						},
						axisTick : {
							show : false
						},
						axisLabel : {
							show : false
						}
					},

					yAxis : [
						{
							type : 'category',
							splitNumber : 4,
							axisLine : {
								show : false
							},
							axisTick : {
								show : false
							},
							axisLabel : {
								color : '#a9abaf',
								fontSize : 14,
								lineHeight : 16,
								margin : 12
							},
							data : categoryNameList
						},

						{
							type : 'category',
							splitNumber : 4,
							axisLine : {
								show : false
							},
							axisTick : {
								show : false
							},
							axisLabel : {
								show : false
							},
							data : categoryNameList
						}
					],

					series : [
						{ //框框
							type : 'bar',
							barWidth : 17,
							color : 'transparent',
							yAxisIndex : 0,
							//barGap : '100%',
							//barCategoryGap : '10px',
							itemStyle : {
								borderWidth : 1,
								barBorderRadius : 9,
							},
							label : {
								show : true,
								position : 'right',
								fontSize : 14,
								distance : 10,
								color : '#5e85d7',
								formatter : function(params) {
									return params.data.v
								}
							},
							data : frameData
						},

						{ //渐变条
							type : 'bar',
							barWidth : 10,
							yAxisIndex : 1,
							//barGap : '100%',
							//barCategoryGap : '10px',
							itemStyle : {
								barBorderRadius : 5,
							},
							data : seriesData
						}
					]
				}

				return options
			})

			return {
				options,
				containerRef,
				value
			}
		}
	})
</script>